<template>
  <div id="user-edit-form">
    <div class="updateInfo" v-show="isShow">
      <h2>修改个人信息</h2>
      <img :src="user.avatar" alt=""/>
      <input type="file" ref="file" @change="uploadFile" style="display: none"/>
      <p @click="upload">更改头像</p>
      <el-input  class="input" type="text" v-model="user.username" />
      <el-button type="success" @click="update">修改</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
    <div class="updatePassword" v-show="!isShow">
      <h2>修改密码</h2>
      <table>
        <tr>
          <td><span>新密码：</span></td>
          <td><el-input class="input" type="password" v-model="newPassword"/></td>
        </tr>
        <tr>
          <td><span>再次确认：</span></td>
          <td><el-input class="input" type="password" v-model="temp"/> </td>
        </tr>
      </table>
      <el-button type="success" @click="update">提交</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import {getUserDetail} from "@/network/userRequest";
import {base64toBlob} from "@/utils/fileUtils";

export default {
  name: "EditUserForm",
  props: {
    show: {
      type: String,
      default() {
        return "updateInfo";
      }
    }
  },
  data() {
    return {
      user: {},
      newPassword: "",
      temp: ""
    }
  },
  methods: {
    //网络请求
    getUserDetail() {
      getUserDetail().then(res => {
        this.user = res.data;
        this.user.avatar = "data:image/jpg;base64, " + res.data.avatar;
      })
    },

    //事件监听
    upload() {
      this.$refs.file.click();
    },
    uploadFile(event) {
      const file = event.target.files[0];
      const fr = new FileReader();
      fr.readAsDataURL(file);
      fr.onload = e => {
        this.user.avatar = e.target.result;
      }
    },
    update() {
      if(!this.isShow) {
        if(this.isSafe) {
          this.user.password = this.newPassword;
        }else {
          return;
        }
      }
      const blob = base64toBlob(this.user.avatar);
      this.user.avatar = blob;
      this.$emit("update", this.user);
    },
    cancel() {
      this.$emit("cancel");
    }
  },
  computed: {
    isShow() {
      console.log(this.show);
      if(this.show === "updateInfo") {
        return true;
      }
      return false;
    },
    isSafe() {
      if(this.newPassword && this.temp) {
        if(this.newPassword !== this.temp) {
          this.$message.error("两次密码不一致！")
          return false;
        }
        if(this.newPassword === this.user.password) {
          this.$message.error("不允许使用当前密码！")
          return false;
        }
        return true;
      }
      this.$message.error("密码不能为空！");
      return false
    }
  }
}
</script>

<style scoped>
  #user-edit-form {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }

  #user-edit-form .updateInfo {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -221px;
    margin-left: -121px;
    padding: 20px;
    text-align: center;
    background-color: white;
  }

  #user-edit-form .updateInfo h2 {
    margin-bottom: 20px;
  }

  #user-edit-form .updateInfo img {
    width: 200px;
  }

  #user-edit-form .updateInfo p {
    height: 1.5em;
    width: 40%;
    margin: 5px auto;
    font-size: 14px;
    color: white;
    background-color: #22a1d6;
    border-radius: 5px;
  }

  #user-edit-form .updateInfo p:hover {
    background-color: #00b5e5;
    cursor: pointer;
  }

  #user-edit-form .updateInfo .input {
    display: block;
    margin: 20px auto;
    width: 50%;
  }

  #user-edit-form .updatePassword {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -119px;
    margin-left: -208px;
    padding: 20px;
    text-align: center;
    background-color: white;
  }

  #user-edit-form .updatePassword h2 {
    margin-bottom: 20px;
  }

  #user-edit-form .updatePassword span {
    font-size: 14px;
  }

  #user-edit-form .updatePassword table {
    margin-bottom: 20px;
  }

  #user-edit-form .updatePassword .input {
    width: 300px;
  }
</style>